<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" href="/manage/css/custom/jquery.ui.css" rel="stylesheet" />
    <link href="/manage/css/main.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="/manage/js/jquery.js"></script>

    <script type="text/javascript" src="/manage/js/jquery.ui.js"></script>

    <style type="text/css">
        .ui-progressbar-value
        {
            background-image: url(/manage/css/images/pbar-ani.gif);
        }
    </style>
    <title></title>
</head>
<body>
    <h2>
        表样式</h2>
    <table class="tblist">
        <tr>
            <th>
                表头
            </th>
            <th>
                表头
            </th>
            <th>
                表头
            </th>
        </tr>
        <tr>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
        </tr>
        <tr>
            <th>
                表头
            </th>
            <td>
                表头
            </td>
            <th>
                表头
            </th>
        </tr>
        <tr>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
        </tr>
        <tr>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
            <td>
                表体
            </td>
        </tr>
    </table>
    <br />
    <a href="#">普通超链接样式</a> <a href="#" id="button" class="btnsty">超链接按钮样式</a><br />

    <script type="text/javascript" language="javascript">
        $(function() 
        {
            $.ui.dialog.defaults.bgiframe = true;
        	$('#dialog').dialog({
					autoOpen: false,
					modal: true,
					buttons: {
						"关闭": function() { 
							$(this).dialog("close"); 
						},
						"OK": function() { 
							alert("sdfsdf"); 
						} 
					}
				});
        });
        var message = function(title,content){
                //$('#dialog').title=title;
                //$('#dialog').html(content);
				$('#dialog').dialog('open');
				return false;
			};
    </script>

    <br />
    <input id="dialog_link" type="button" class="button" value="按钮(点击调用模式对话框)" onclick="message('标题','<b>内容</b>')" />
    <div id="dialog" title="测试">
        <div>
            <ul>
                <li>sfsdfd</li>
                <li>sdfsdf</li>
                <li>safsdf</li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">message('标题','<b>内容234234</b>');</script>

    <h2>
        选项卡范例</h2>

    <script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
    </script>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">选项1</a></li>
            <li><a href="#tabs-2">选项2</a></li>
            <li><a href="#tabs-3">选项3</a></li>
            <li><a href="#tabs-4">选项4</a></li>
        </ul>
        <div id="tabs-1">
            <p>
                选项卡1内容选项卡1内容选项卡1内容选项卡1内容选项卡1内容选项卡1内容选项卡1内容选项卡1内容</p>
        </div>
        <div id="tabs-2">
            <p>
                选项卡2内容选项卡2内容选项卡2内容选项卡2内容选项卡2内容选项卡2内容</p>
        </div>
        <div id="tabs-3">
            <p>
                选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容</p>
            <p>
                选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容</p>
        </div>
        <div id="tabs-4">
            <p>
                选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容</p>
            <p>
                选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容选项卡3内容</p>
        </div>
    </div>
    <h2>
        日历范例</h2>

    <script type="text/javascript">
	$(function() {
		$('#datepicker').datepicker({
			showButtonPanel: true
		});

	});
    </script>

    <p>
        日历控件:
        <input type="text" id="datepicker"></p>
    <h2>
        进度条范例</h2>

    <script type="text/javascript">
	$(function() {
		$("#progressbar").progressbar({
			value: 30
		});
	});
    </script>

    <div id="progressbar">
    </div>
    <h2>
        警告错误样式</h2>
    <div id="Left111">
        <h3>
            <a href="#">菜单</a></h3>
        <div>
            <ul>
                <li><a href="MGroup.aspx" target="main">分组管理</a></li>
                <li><a href="Register.aspx" target="main">管理员注册</a></li>
                <li><a href="MRight.aspx" target="main">权限管理</a></li>
                <li><a href="MPage.aspx" target="main">页面管理</a></li>
            </ul>
        </div>
        <h3>
            <a href="#">默认分组</a></h3>
        <div>
            <ul>
                <li><a href="MPage.aspx" target="main">页面管理</a></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript" language="javascript">
        $(function() {
            $("#Left111").accordion({
                        header: "h3", 
                        collapsible: true, 
                        autoHeight: false 
             })
        });
    </script>

    <h2>
        警告错误样式</h2>
    <div class="ui-widget">
        <div style="padding: 0px 0.7em; margin-top: 20px;" class="ui-state-highlight ui-corner-all">
            <p>
                <span style="float: left; margin-right: 0.3em" class="ui-icon ui-icon-info"></span>
                <strong>警告</strong> 警告文字样式.</p>
        </div>
    </div>
    <br />
    <div class="ui-widget">
        <div style="padding: 0px 0.7em;" class="ui-state-error ui-corner-all">
            <p>
                <span style="float: left; margin-right: 0.3em" class="ui-icon ui-icon-alert"></span>
                <strong>错误:</strong> 错误文字样式.</p>
        </div>
    </div>

    <script type="text/javascript" language="javascript">
        $(function() {
		$("#slider").slider({range: "min",value:5000,min: 5000,max: 500000,step: 5000,
			slide: function(event, ui) {
				$("#moneyTextBox").val( ui.value);
			}
		});
		$("#moneyTextBox").val($("#slider").slider("value"));
	});
    </script>

    <div id="slider" class="slider">
        <ul>
        </ul>
    </div>
</body>
</html>
